<template>
  <ul class="results-content">
    <li class="singer-list" v-if="singers.length">
      <div class="item" v-for="item in singers" :key="item.id" @click="selectSinger(item)">
        <img class="img" v-lazy="item.img1v1Url + '?param=64y64'" :alt="item.name">
        <div class="name" v-text="item.name" />
      </div>
    </li>

    <SongItem v-for="(item, index) in songs"
              component-type="li"
              :key="item.id"
              :index="index+1"
              :data="item"
              :has-operation="false"
              @select="selectSong(item)"/>
  </ul>
</template>

<script>
import SongItem from 'components/SongItem/SongItem'

export default {
  name: 'results',
  props: {
    singers: {
      type: Array,
      default () {
        return []
      }
    },
    songs: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    selectSinger (singer) {
      this.$store.dispatch('setDisc', {
        type: 3,
        id: singer.id,
        name: singer.name,
        imgUrl: singer.picUrl
      })
    },
    selectSong (song) {
      let List = this.$store.state.player.playList
      const nowIndex = List.findIndex(item => item.id === this.$store.state.player.currentMusic.id)
      nowIndex > -1 ? List.splice(nowIndex + 1, 0, song) : List.push(song)
      this.$store.dispatch('player/setPlayList', List)
      this.$store.dispatch('player/setCurrentMusic', song)
      this.$router.push('player')
      this.$emit('select', song)
    }
  },
  components: { SongItem }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";
  @import "~common/style/mixins.less";

  .singer-list {
    margin: 0 12px 12px;
    padding: 0 12px ;
    background: @color-background-d;
    .border-radius(12px);
    .item {
      margin: 8px 12px;
      display: inline-block;
      .img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        color: @color-text;
        margin-bottom: 12px;
        font-size: @font-size-medium;
      }
    }
  }
</style>
